<template>
    <div class="content">
        <button class="item" v-for="item in urlList" :key="item.name" @click="itemClick(item)">
            <div class="img"><img :src="item.icon"/></div>
            <span>{{item.name}}</span>
        </button>
    </div>
</template>
<script setup lang="ts">

import { ref } from 'vue';

const urlList = ref([
    {
        name:'Vue',
        url:'https://cn.vuejs.org/',
        icon:'/src/assets/logo.svg'
    },
    {
        name:'Vite',
        url:'https://cn.vitejs.dev/',
        icon:'/src/assets/vite-logo.svg'
    },
    {
        name:'element-plus',
        url:'https://element-plus.org/zh-CN/component/overview.html',
        icon:'https://element-plus.org/images/element-plus-logo.svg'
    }
])
const itemClick = (v)=>{
    window.open(v.url)
}
</script>
<style scoped>
.content{
    display: flex;
    column-gap: 10px;
    .item{
        width:170px;
        height: 60px;
        background-color: #ffffff;;
        border-radius: 5px;
        border: 1px solid #dcdfe6;
        display:flex;
        align-items: center;
        cursor: pointer;
        .img{
            margin: 0 10px;
            width: 46px;
            height: 46px;
            background-color: #5b38b9;
            border-radius: 5px;
            img{
                margin: 9px;
                width: 28px;
                height: 28px
            }
        }
        span{
            color:#303e33;
            font-size: 14px;
        }
    }
}
</style>